<template>
  <div class="regulatory-warning">
    <!-- 柱状图 - 农作物生长周期内的产量变化 X轴：时间（月） Y轴：产量（单位 公顷） 描述：展示不同时间段内农作物的产量变化，帮助识别生长高峰期和可能的低谷期 -->
    <div>
      <h3>农作物生长周期内的产量变化</h3>
      <div id="barChart" style="width: 29vw; height: 500px"></div>
    </div>
    <!-- 饼图 - 灾害类型占比 分类：不同的灾害类型（如干旱、洪水、病虫害等） 值：每种灾害发生的频率或影响程度百分比 描述：直观地显示各种灾害对农作物的影响比例，有助于优先处理最频繁或最具破坏性的灾害类型 -->
    <div>
      <h3>灾害类型占比</h3>
      <div id="pieChart" style="width: 29svw; height: 500px"></div>
    </div>
    <!-- 折线图 - 春季12周气象条件与农作物生长的关系 X轴：时间（周） Y轴：气象参数（温度摄氏度）和农作物生长指标（生长速率(没单位不知道啥单位)） 描述：追踪气象条件如何随时间变化以及这些变化如何影响农作物的生长。这有助于预测未来可能的生长趋势和潜在的灾害风险。 -->
    <div>
      <h3>春季12周气象条件与农作物生长关系</h3>
      <div id="lineChart" style="width: 29svw; height: 500px"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { Chart } from "@antv/g2";
import {
  getCropProductionData,
  getDisasterTypeData,
  getWeatherCropGrowthData,
} from "@/api/baseData";

export default {
  mounted() {
    this.createBarChart();
    this.createPieChart();
    this.createLineChart();
  },
  methods: {
    // 柱状图 - 农作物生长周期内的产量变化
    async createBarChart() {
      const res = await getCropProductionData();
      if (res && res.code === 200) {
        const barChart = echarts.init(document.getElementById("barChart"));
        const option = {
          title: {
            // text: "农作物生长周期内的产量变化",
          },
          tooltip: {},
          xAxis: {
            // data: ["A", "B", "C", "D", "E"],
            data: res?.data?.map((item) => item[0]),
          },
          yAxis: {},
          series: [
            {
              name: "数量",
              type: "bar",
              // data: [5, 20, 36, 10, 10],
              data: res?.data?.map((item) => item[1]),
            },
          ],
        };
        barChart.setOption(option);
      }
    },
    //饼图 - 灾害类型占比
    async createPieChart() {
      const res = await getDisasterTypeData();
      if (res && res.code === 200) {
        const pieChart = echarts.init(document.getElementById("pieChart"));
        const option = {
          title: {
            // text: "灾害类型占比",
          },
          tooltip: {},
          series: [
            {
              name: "占比",
              type: "pie",
              // data: [
              //   { value: 335, name: "数量1" },
              //   { value: 310, name: "数量2" },
              //   { value: 234, name: "数量3" },
              // ],
              data: res?.data?.map((item) => {
                return { name: item[0], value: item[1] };
              }),
            },
          ],
        };
        pieChart.setOption(option);
      }
    },
    // 折线图 - 春季12周气象条件与农作物生长的关系
    async createLineChart() {
      getWeatherCropGrowthData;
      const res = await getWeatherCropGrowthData();
      if (res && res.code === 200) {
        const lineChart = echarts.init(document.getElementById("lineChart"));
        const option = {
          title: {
            // text: "春季12周气象条件与农作物生长的关系",
          },
          legend: {
            data: ["气象参数（温度摄氏度）", "农作物生长指标（生长速率）"],
          },
          grid: {
            left: "3%",
            top: "10%",
            containLabel: true,
          },
          tooltip: {},
          xAxis: {
            // data: ["A", "B", "C", "D", "E"],
            data: res?.data?.map((item) => item[0]),
          },
          yAxis: [
            {
              name: "温度(摄氏度)",
              type: "value",
              position: "left",
              textStyle: {
                width: "100px",
                overflow: "break",
              },
            },
            {
              name: "生长速率",
              type: "value",
              position: "right",
              textStyle: {
                width: "100px",
                overflow: "break",
              },
            },
          ],
          series: [
            {
              name: "气象参数（温度摄氏度）",
              type: "line",
              // data: [5, 20, 36, 10, 10],
              data: res?.data?.map((item) => item[1]),
            },
            {
              name: "农作物生长指标（生长速率）",
              type: "line",
              // data: [5, 20, 36, 10, 10],
              data: res?.data?.map((item) => item[2]),
            },
          ],
        };
        lineChart.setOption(option);
      }
    },
  },
};
</script>
<style scoped lang="scss">
.regulatory-warning {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
